<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue监测数据改变的原理_数组</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
			<hr />
			<h2>学生姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
			<button @click.once="addSex">给同学添加性别</button>
			<h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,i) of student.hobby">{{h}}</li>
			</ul>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,i) of student.friends">{{f.name}} - {{f.age}}</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					name: '尚学堂',
					address: '北京',
					student: {
						name: 'xiaomo',
						age: {
							rAge: 40,
							sAge: 23
						},
						hobby: ['抽烟', '喝酒', '烫头'],
						friends: [
							{name: 'jerry', age: 35},
							{name: 'tony', age: 36}
						]
					}
				},
				methods: {
					addSex() {
						// 不能在vue实例身上添加响应式属性,只能在data里面的某一个对象里面添加响应式属性
						this.$set(this.student, 'sex', '男')
					}
				}
			})
		</script>
	</body>
</html>
